<template>
  <div>
    <div :class="{header:isbground, 'header1':bground}">
      <div>云+社区</div>
      <div>专栏</div>
      <div>问答</div>
      <div>沙龙</div>
      <div>快讯</div>
      <div>团队主页</div>
      <div>开发者手册</div>
      <div>智能钛AI</div>
      <div>更多</div>
      <div>
        <el-input
          placeholder="请输入搜索内容"
          v-model="search">
          <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i> -->
        </el-input>
      </div>
      <div>
        <el-button type="primary">写文章</el-button>
      </div>
      <div>
        <el-button class="bgbutton">提问</el-button>
      </div>
      <p>
        <span>登陆</span>·<span>注册</span>
      </p>
    </div>
    <div>
      <el-carousel class="car" direction="vertical" height="600px" :interval="5000" arrow="always">
        <el-carousel-item>
          <div class="caritem">
            <div class="caritemchild" >
              <div>浪博CDB/CynosDB计算引擎核心技术揭秘</div>  
            </div>
            <div class="caritemchild2" style="">全球顶级技术专家、架构师、开发者线上汇聚， Serverless 前沿趋势及落地经验，尽在于此！</div>
            <el-button class="bgbutton carbutn">了解详细</el-button>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="caritem">
            <div class="caritemchild" >
              <div>浪博CDB/CynosDB计算引擎核心技术揭秘</div>  
            </div>
            <div class="caritemchild2" style="">全球顶级技术专家、架构师、开发者线上汇聚， Serverless 前沿趋势及落地经验，尽在于此！</div>
            <el-button class="bgbutton carbutn">了解详细</el-button>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="caritem">
            <div class="caritemchild" >
              <div>浪博CDB/CynosDB计算引擎核心技术揭秘</div>  
            </div>
            <div class="caritemchild2" style="">全球顶级技术专家、架构师、开发者线上汇聚， Serverless 前沿趋势及落地经验，尽在于此！</div>
            <el-button class="bgbutton carbutn">了解详细</el-button>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="caritem">
            <div class="caritemchild" >
              <div>浪博CDB/CynosDB计算引擎核心技术揭秘</div>  
            </div>
            <div class="caritemchild2" style="">全球顶级技术专家、架构师、开发者线上汇聚， Serverless 前沿趋势及落地经验，尽在于此！</div>
            <el-button class="bgbutton carbutn">了解详细</el-button>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="pbody">
      <div class="ppcard">
        <div class="pcard">
          <div class="card">
            <div>专栏</div>
            <img src="https://ask.qcloudimg.com/raw/yehe-1b54603d7b98/bm7yv4p11y.svg" alt="">
          </div>
          <div class="cardtitle">技术干活聚集地</div>
        </div>
        <div class="pcard">
          <div class="card">
            <div>专栏</div>
            <img src="https://ask.qcloudimg.com/raw/yehe-1b54603d7b98/bm7yv4p11y.svg" alt="">
          </div>
          <div class="cardtitle">技术干活聚集地</div>
        </div>
        <div class="pcard">
          <div class="card">
            <div>专栏</div>
            <img src="https://ask.qcloudimg.com/raw/yehe-1b54603d7b98/bm7yv4p11y.svg" alt="">
          </div>
          <div class="cardtitle">技术干活聚集地</div>
        </div>
        <div class="pcard">
          <div class="card">
            <div>专栏</div>
            <img src="https://ask.qcloudimg.com/raw/yehe-1b54603d7b98/bm7yv4p11y.svg" alt="">
          </div>
          <div class="cardtitle">技术干活聚集地</div>
        </div>
      </div>
      <div>
        <div class="floor1">
          <div style="display:flex">
            <img src="https://ask.qcloudimg.com/raw/yehe-1b54603d7b98/bm7yv4p11y.svg" alt="">
            <div>优选文章</div>
          </div>
          <div class="look">查看全部></div>
        </div>
      </div>
      <div>
        <el-row :gutter="150">
          <el-col class="btitle" :span="8">
            <div>技术探索</div>
            <div class="font">人人都在谈的区块链，真的人人都能懂吗？</div>
            <div class="font2">区块链技术不是一项横空出世的新技术，它是站在巨人的肩膀上不断演进的。区块链的重要组成技术源于1985年发明的椭</div>
            <ul class="ulli">
              <li>深度剖析数据库国产化迁移之路</li>
              <li>Serverless 实战：企业微信机器人还能这么玩？</li>
              <li>美团命名服务的挑战与演进</li>
              <li>Serverless SSR 技术在猎豹移动的实践</li>
            </ul>
          </el-col>
          <el-col class="btitle" :span="8">
            <div>技术探索</div>
            <div class="font">人人都在谈的区块链，真的人人都能懂吗？</div>
            <div class="font2">区块链技术不是一项横空出世的新技术，它是站在巨人的肩膀上不断演进的。区块链的重要组成技术源于1985年发明的椭</div>
            <ul class="ulli">
              <li>深度剖析数据库国产化迁移之路</li>
              <li>Serverless 实战：企业微信机器人还能这么玩？</li>
              <li>美团命名服务的挑战与演进</li>
              <li>Serverless SSR 技术在猎豹移动的实践</li>
            </ul>
          </el-col>
          <el-col class="btitle" :span="8">
            <img width="320px" src="https://ask.qcloudimg.com/raw/yehe-b3360f6a89f75/jywmxqhvgc.png?imageView2/2/w/640" alt="">
           <div style="font-size:24px">如何玩转云开发静态托管</div>
          </el-col>
        </el-row>
      </div>
      <div >
        <el-divider></el-divider>
      </div>
      <div>
        <div class="floor1">
          <div style="display:flex">
            <img src="https://ask.qcloudimg.com/raw/yehe-1b54603d7b98/yktr7go6e5.svg" alt="">
            <div>技术沙龙</div>
          </div>
          <div class="look">查看全部></div>
        </div>
      </div>
      <div>
        <el-row style="margin-top:3rem" :gutter="120">
          <el-col :span="8">
            <div>
              <div class="txt_">浪潮之巅，程序员如何拥抱新技术？</div>
              <div class="txt_1">2020-06-19 周五 20:00-21:00</div>
              <img height="650px" width="320px" src="../../assets/bg.png" alt="">
              <img class="txt_img1"  src="https://ask.qcloudimg.com/raw/yehe-4a61cebf/lv36e4tnb5.png?imageView2/2/w/560" alt="">
            </div>
          </el-col>
          <el-col :span="16">
            <el-row :gutter="20">
              <!-- <el-col v-for="(item,index) in teacherList" :key="index" :span="8">
                <div class="pimg" >
                  <div class="name">{{item.name}}</div>
                  <div class="name_1">{{item.teacher}}</div>
                  <div class="address">{{item.text}}</div>
                </div> -->
              <el-col v-for="(item,index) in teacherList" :key="index"  :span="8">
                <div class="pimg" >
                  <div class="name">{{item.name}}</div>
                  <div class="name_1">{{item.position}}</div>
                  <div class="address">{{item.txt}}</div>
                </div>
                <div class="pimg ppimg">
                  <div class="name">{{item.name}}</div>
                  <div class="name_1">{{item.position}}</div>
                  <div class="address">{{item.txt}}</div>
                </div>
                <div class="pimg">
                  <div class="name">{{item.name}}</div>
                  <div class="name_1">{{item.position}}</div>
                  <div class="address">{{item.txt}}</div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div >
        <el-divider></el-divider>
      </div>
      <div>
        <div class="floor1">
          <div style="display:flex">
            <img src="https://ask.qcloudimg.com/raw/yehe-1b54603d7b98/2yym7ih9d4.svg" alt="">
            <div>开发者手册</div>
          </div>
          <div class="look">查看全部></div>
        </div>
      </div>
      <div>
        <el-row style="margin-top:3rem" :gutter="150">
          <el-col v-for="(item,index) in classList" :key="index" class="parent" :span="6">
            <div class="hand">
                <img  :src="item.imgUrl" alt="">
                <div class="stitle">{{item.class}}</div>
                <div class="sstitle">{{item.txt}}</div>
                <div></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      search: '',
      bground: true,
      isbground: false,
      classList: [
        {
          class: 'Python',
          txt: 'Python 是一种面向对象的解释型计算机程序设计语言，由荷兰人 Guido van Rossum 于1989年发明，第一个公开发行版发行于1991年。',
          imgUrl: 'https://ask.qcloudimg.com/raw/yehe-1b54603d7b98/pnusuf9y7z.jpg?imageView2/2/w/440'
        },
        {
          class: 'TensorFlow Guide',
          txt: '它是是谷歌基于DistBelief进行研发的第二代人工智能学习系统，其命名源于本身的运行原理。',
          imgUrl: 'https://ask.qcloudimg.com/raw/yehe-1b54603d7b98/sdrl7kop4c.jpg?imageView2/2/w/440'
        },
        {
          class: 'Vue 2',
          txt: 'Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。',
          imgUrl: 'https://ask.qcloudimg.com/raw/yehe-1b54603d7b98/r928473ggj.jpg?imageView2/2/w/440'
        },
        {
          class: 'CSS',
          txt: '层叠样式表（ Cascading Style Sheets ）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。',
          imgUrl: 'https://ask.qcloudimg.com/raw/yehe-1b54603d7b98/2tf50bw33z.jpg?imageView2/2/w/440'
        },
      ],
      teacherList: [
        {
          name: '亮亮',
          position: '浪博云区块链高级工程师',
          txt: '区块链落地：区块链存证平台产品及技术方案'
        },
        {
          name: '亮亮',
          position: '浪博云区块链高级工程师',
          txt: '区块链落地：区块链存证平台产品及技术方案'
        },
        {
          name: '亮亮',
          position: '浪博云区块链高级工程师',
          txt: '区块链落地：区块链存证平台产品及技术方案'
        },
      ]
    }
  },
  mounted(){
    window.addEventListener('scroll', this.handleScroll)
  },
  methods:{
    handleScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if( scrollTop > 0 ){
        this.bground = true
        this.isbground = false
      }else{
        this.bground = false
        this.isbground = true
      }
      // console.log(scrollTop)
    },
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  
}
</script>
<style  scoped>
  .name_1{
    font-size: 12px;
    line-height: 18px;
    color: #666;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 36px;
  }
  .address{
    font-size: 14px;
    line-height: 24px;
    color: #000;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: 48px;
    margin-top:4.4rem;
    /* background: #fff; */
  }
  .name{
    font-size: 16px;
    line-height: 26px;
    color: #000;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-font-smoothing: antialiased;
  }
  .txt_img1{
    width:260px;
    position:absolute;
    margin-top:20rem;
    margin-left: -18rem;
  }
  .txt_1{
    position:absolute;
    margin-top:10rem;
    margin-left:1.5rem;
    line-height: 32px;
    font-weight: 500;width:260px;
    color:#fff
  }
  .txt_{
    position:absolute;
    margin-top:5rem;
    margin-left:1.5rem;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;width:260px;
    color:#fff
  }
  .txt_:hover{
    color: #008cff;
    cursor: pointer;
  }
  .sstitle{
    font-size: 14px;
    line-height: 24px;
    color: #999;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    max-height: 72px;
  }
  .stitle{
    text-align: center;
    line-height: 26px;
    color: #000;
    font-weight: 400;
  }
  .hand img{
    width: 100%;
    height: 110px;
  }
  .hand{
    padding: 10px;
    border: 1px solid #eee;
    
  }
  .parent{
    transition: all .5s linear;
  }
  .parent :hover{
    transition: 0.2s;
    transition-duration:0.5s;
    transform:scale(1.05);
    transition-timing-function:ease-in-out;
    cursor: pointer;
  }
  .pimg{
    height:180px;
    /* border: 2px solid #eee; */
    padding: 1rem;
    background: #dbdde5;
  }
  .ppimg{
    margin-top:23px;
    margin-bottom:23px
  }
  .look:hover{
    color: #00a4ff;
    cursor: pointer;
  }
  .btitle{
    margin-top: 2rem;
  }
  .btitle :first-child{
    font-size:14px;
    font-weight: 900;
    color: #008cff;
  }
  .font{
    font-size: 20px;
    margin-top: .5rem;
  }
  .font2{
    margin-top: .5rem;
    font-size: 14px;
    color:#666
  }
  .ulli{
    margin-left:1.5rem
  }
  .ulli li{
    margin-top: .5rem;
    border-bottom: 1px solid #eee;
    color: #000 !important;
    font-weight: 100!important;
  }
  ul li:hover{
    color: #00a4ff!important;
    cursor: pointer;
  }
  .floor1{
    display: flex;
    justify-content: space-between;
    margin-top: 3rem
  }
  .floor1 :first-child>div{
    font-size: 24px;
    color: #000;
  }
  .floor1 img{
    margin-top: 3px;
    margin-right: 5px;
  }
  .floor1 :last-child{
    color: #666;
  }
  .card{
    display: flex;
    justify-content: space-between;
    width: 280px;
    padding: 1rem;
    border-bottom:1px solid #eee ;
  }
  .pcard{
    padding: .2rem;
    border: 1px solid #eee;
    height: 110px;
    box-shadow: 0 2px 4px rgba(3,27,78,.06);
    background: #fff;
    transition: all 1s linear;
  }
  .pcard:hover{
    transition: 0.2s;
    transition-duration:0.5s;
    transform:scale(1.05);
    transition-timing-function:ease-in-out;
    cursor: pointer;
  }
  .ppcard{
    display:flex;
    position: relative;
    justify-content: space-between;
    z-index: 100;
    margin-top: -2rem ;
    background: none;
    
  }
  .pbody{
    min-width: 1200px;
    margin-left: 5%;
    margin-right: 5%;
  }
  .card div{
    font-size: 22px;
    font-weight: 500;
  }
  .cardtitle{
    padding: 1rem;
    color: #666666;
  }
  .carbutn{
    margin-left:12rem;
    margin-top:2rem;
    width:130px
  }
  .caritemchild{
    margin-left: 7rem;
    margin-top:10rem;
    color:#fff;
    font-size: 36px;
    line-height: 50px;
    font-weight: 400;
    width:400px;
  }
  .caritemchild2{
    margin-top:1.5rem;
    font-size:16px;
    color:#fff;
    width:400px;
    margin-left:7rem
  }
  .car{
    /* width: 100%; */
    min-width: 1200px; 
  }
  
  .caritem{
    position: absolute;
    background-image: url(https://ask.qcloudimg.com/raw/yehe-ffb5e0f18/fididk07mw.jpg);
    overflow: hidden;
    width: 120%;
    height: 120%;
    display: inline-block;
    position: absolute;
    background-size: 100% 100%;
    text-decoration: none;
  }
  .car img{
    overflow: hidden;
    width: 120%;
    height: 120%;
    display: inline-block;
    position: absolute;
    background-size: 100% 100%;
    text-decoration: none;
  }
  .header{
    display: flex;
    width: 100%;
    min-width: 1400px;
    margin:auto;
    height: 50px;
    align-items:center;
    justify-content:center;
    color: #fff;
    position: fixed;
    /* left: 0; */
    /* top: 0; */
    z-index: 1000;
    background: none;
  }
  .header div{
    padding: 1rem;
  }
  .header p span:hover{
    color: #008cff;
    cursor: pointer;
  }
  .header div:hover{
    color: #00a4ff;
    cursor: pointer;
  }
  .header1{
    display: flex;
    width: 100%;
    min-width: 1400px;
    margin:auto;
    height: 50px;
    align-items:center;
    justify-content:center;
    color: #fff;
    position: fixed;
    /* left: 0; */
    /* top: 0; */
    z-index: 1000;
    background: #2b303b;
  }
  .header1 div{
    padding: 1rem;
  }
  .header1 p span:hover{
    color: #008cff;
    cursor: pointer;
  }
  .header1 div:hover{
    color: #00a4ff;
    cursor: pointer;
  }
  .bgbutton{
    /* width: 150px; */
    background: none;
    color:#fff;
  }
  .bgbutton:hover{
    background: #fff;
    color:#008cff
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>